<template>
	<!-- 修改项目状态 -->
	<view class="select-container">
		<view class="button-group">
			<button class="action-btn animate__animated animate__bounceIn" @click="updateState('准备')">
				<text class="btn-icon">🛠️</text>
				<text class="btn-text">准备</text>
			</button>
			<button class="action-btn animate__animated animate__bounceIn" @click="updateState('进行中')">
				<text class="btn-icon">🚀️</text>
				<text class="btn-text">进行中</text>
			</button>
			<button class="action-btn animate__animated animate__bounceIn" @click="updateState('结束')">
				<text class="btn-icon">📌</text>
				<text class="btn-text">结束</text>
			</button>
		</view>
	</view>
</template>

<script>
import { request } from '../../request';
export default {
	data() {
		return {
			id: null
		};
	},
	methods: {
		updateState(item) {
			console.log(item);
			// 修改状态
			request(`public/updateStateProject?id=${this.id}&state=${item}`, {}, 'POST').then((res) => {
				if (res.data.code != 200) {
					this.$message.error('   ' + res2.data.msg);
					return;
				}
				uni.navigateBack({
					delta: 2
				});
			});
		}
	},
	onLoad(item) {
		console.log(item);
		this.id = item.item;
	}
};
</script>

<style scoped>
/* 基础样式重置 */
button {
	border: none;
	outline: none;
	background: none;
	padding: 0;
	margin: 0;
}

/* 容器样式 */
.select-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	background-color: #f8f9fa;
	padding: 0 30rpx;
}

/* 按钮组样式 */
.button-group {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 60rpx;
	width: 100%;
	max-width: 800rpx;
}

/* 操作按钮样式 */
.action-btn {
	flex: 1;
	max-width: 300rpx;
	height: 300rpx;
	border-radius: 20rpx;
	background-color: #ffffff;
	box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.action-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.3) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.action-btn:hover {
	transform: translateY(-10rpx);
	box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.12);
}

.action-btn:hover::before {
	opacity: 1;
}

/* 按钮图标样式 */
.btn-icon {
	font-size: 60rpx;
	margin-bottom: 20rpx;
	color: #3498db;
	transition: transform 0.3s ease;
}

.action-btn:hover .btn-icon {
	transform: scale(1.2);
}

/* 按钮文字样式 */
.btn-text {
	font-size: 32rpx;
	color: #333333;
	font-weight: 500;
	text-align: center;
}

/* 动画延迟 */
.action-btn:nth-child(1) {
	animation-delay: 0.1s;
}

.action-btn:nth-child(2) {
	animation-delay: 0.2s;
}
</style>
